﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0051)http://www.kxbd.com/mylab/090125FloatDiv/index.html -->
<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>跟随页面滚动的浮动层</TITLE>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<META content="MSHTML 6.00.2900.5726" name=GENERATOR>
<META content=Aken.li(arken_lqz@hotmail.com) name=author>
<META content="" name=keywords>
<META content=跟随页面滚动的浮动层 name=description>
<STYLE type=text/css> {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
P {
	MARGIN: 10px 0px
}
UL {
	LIST-STYLE-TYPE: none
}
#float {
	MARGIN: 0px auto; WIDTH: 960px; PADDING-TOP: 1px; POSITION: relative
}
#float1 {
	PADDING-RIGHT: 10px; PADDING-LEFT: 10px; BACKGROUND: #ccc; LEFT: 0px; PADDING-BOTTOM: 10px; PADDING-TOP: 10px; POSITION: absolute; TOP: 0px
}
#float2 {
	RIGHT: 0px; CURSOR: pointer; POSITION: absolute; TOP: 0px
}
</STYLE>

<SCRIPT src="mootools-1.2-core-nc1.js" type=text/javascript></SCRIPT>

<SCRIPT src="mootools-1.2-more.js" type=text/javascript></SCRIPT>

<SCRIPT src="FloatDiv.js" type=text/javascript></SCRIPT>

<SCRIPT type=text/javascript>
	document.addEvent('domready',function(){
		var fd1 = new FloatDiv('float1');
		var myDrag = new Drag('float1',{
			onStart: function(el){
				fd1.isActive = false;
			},
			onComplete: function(el){
				fd1.options.y = parseInt(el.getStyle('top'))-window.getScroll().y;
				fd1.isActive = true;
			}
		});

		var fd2 = new FloatDiv('float2',{y:100});
		fd2.isActive = false;
		$('float2').addEvent('click',fd2.toggleActive.bind(fd2));
	});
	</SCRIPT>
</HEAD>
<BODY>
<DIV id=float>
<DIV id=float1>
<UL>
  <LI>导航一 
  <LI>导航二 
  <LI>导航三 
  <LI>导航四 </LI></UL></DIV>
<DIV id=float2><IMG height=45 alt=float src="float.files/02s.jpg" 
width=60></DIV></DIV>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>左边导航可拖动随意放置在页面上，右边图片可点击来开关浮动</P>
<P>111</P>
<P>222</P>
<P>333</P>
<P>444</P>
<P>555</P>
<P>111</P>
<P>222</P>
<P>333</P>
<P>444</P>
<P>555</P>
<P>111</P>
<P>222</P>
<P>333</P>
<P>444</P>
<P>555</P>
<P>111</P>
<P>222</P>
<P>333</P>
<P>444</P>
<P>555</P>
<P>111</P>
<P>222</P>
<P>333</P>
<P>444</P>
<P>555</P>
<P>111</P>
<P>222</P>
<P>333</P>
<P>444</P>
<P>555</P>
<P>111</P>
<P>222</P>
<P>333</P>
<P>444</P>
<P>555</P>
<P>111</P>
<P>222</P>
<P>333</P>
<P>444</P>
<P>555</P>
<P>111</P>
<P>222</P>
<P>333</P>
<P>444</P>
<P>555</P>
<P>111</P>
<P>222</P>
<P>333</P>
<P>444</P>
<P>555</P>
<P>111</P>
<P>222</P>
<P>333</P>
<P>444</P>
<P>555</P>
<P>111</P>
<P>222</P>
<P>333</P>
<P>444</P>
<P>555</P>
</BODY></HTML>
